<template>
  <div>
    <!-- 查询 -->
    <el-card class="query">
      <el-form class="pageQuery" label-position="top">
        <div class="queryItem" v-for="(queryItem, index) in queryItem" :key="index">
          <el-form-item :label="queryItem.label">
            <el-input v-if="queryItem.inputType == 'input'" :placeholder="queryItem.placeholder"
              v-model="queryInfo[queryItem.model]"></el-input>

            <el-select v-if="queryItem.inputType == 'select'" :placeholder="queryItem.placeholder"
              v-model="queryInfo[queryItem.model]">
              <el-option v-for="(item, index) in  option[queryItem.option]" :key="index" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
            <el-date-picker v-if="queryItem.inputType == 'date'" :unlink-panels="true" v-model="dateValue"
              type="daterange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期" @change="optionDate"></el-date-picker>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="getListData">查询</el-button>
          <el-button :disabled="buttonType.type"><downloadExcel :fetch="downExcelButton" :fields="json_fields" name="订单列表数据.xls">{{ buttonType.text }}</downloadExcel></el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 列表 -->
    <el-card>
      <el-table :data="listData" v-loading="loading" style="margin-bottom: 10px" border v-fit-columns>
        <el-table-column v-for="(tableItem, index) in tableItem" :key="index" :label="tableItem.label" :prop="tableItem.prop" :width="tableItem.width">
        </el-table-column>

        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <div v-html="$api.status.orderStatus(scope.row.status, option[$api.Enum.DicTypeOrderStatus])"></div>
          </template>
        </el-table-column>

        <el-table-column width="150" label="操作" fixed="right" class="table-operation" :show-overflow-tooltip="false">
          <template slot-scope="scope">
            <div class="table-operation">
              <el-link v-if="$api.buttonPower(76)" type="primary" @click="detailOpen(scope.row)">详情</el-link>
              <el-link v-if="$api.buttonPower(77) && scope.row.status == 2" type="primary"
                @click="refundButton(scope.row)">退款</el-link>
            </div>
          </template>
        </el-table-column>

        <template slot="empty">
          <myEmpty></myEmpty>
        </template>
      </el-table>
    </el-card>
    <myDialog ref="refundDialog" dialogTitle="订单退款">
      <div class="refund">
        <el-form class="dialogForm">
          <el-form-item label="订单号">
            <el-input v-model="refundForm.order_sn" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="退款金额">
            <el-input v-model="refundForm.pay_amount" placeholder="请输入小于订单金额的退款额">
              <template slot="prepend">本订单金额{{ refundAmount }}</template>
            </el-input>
          </el-form-item>

          <el-form-item label="退款备注" class="textareaInput">
            <el-input v-model="refundForm.remark" placeholder="请输入退款备注" type="textarea"></el-input>
          </el-form-item>

          <el-form-item class="buttonBox">
            <el-button @click="$refs.refundDialog.dialog = false">取消</el-button>
            <el-button @click="submitRefund" type="danger">确定退款</el-button>
          </el-form-item>
        </el-form>
      </div>
    </myDialog>
    <el-drawer title="订单详情" :visible.sync="detail_box.show" size="50%">
      <myOrderDetail v-if="detail_box.show" :data_id="detail_box.id" @close="detailClose"></myOrderDetail>
    </el-drawer>

    <myPaging :queryInfo="queryInfo" :getListData="getListData"></myPaging>
  </div>
</template>

<script>
export default {
  name: "WuliankaOrderslist",

  data() {
    return {
      queryInfo: {
        page: 1,
        size: 10,
        total: 0,
      },
      dateValue: [],
      listData: [],
      option: [],
      refundForm: {
        pay_amount: ''
      },
      level: "",
      queryItem: [
        {
          inputType: 'input',
          model: 'order_sn',
          placeholder: '请输入订单号',
          label: '订单号',
          option: ''
        },
        {
          inputType: 'input',
          model: 'iccid',
          placeholder: '请输入iccid',
          label: 'iccid',
          option: ''
        },
        {
          inputType: 'select',
          model: 'status',
          placeholder: '请选择订单状态',
          label: '订单状态',
          option: this.$api.Enum.DicTypeOrderStatus
        },
        {
          inputType: 'select',
          model: 'agent_app_id',
          placeholder: '请选择应用商',
          label: '应用商',
          option: this.$api.Enum.DicTypeResellerList
        },
        {
          inputType: 'select',
          model: 'agent_agency_id',
          placeholder: '请选择代理商',
          label: '代理商',
          option: this.$api.Enum.DicTypeResellerList
        },
        {
          inputType: 'select',
          model: 'agent_retailer_id',
          placeholder: '请选择零售商',
          label: '零售商',
          option: this.$api.Enum.DicTypeResellerList
        },
        {
          inputType: 'date',
          model: 'date',
          placeholder: '',
          label: '创建时间',
          option: ''
        },
      ],
      tableItem: [
        {
          label: '订单号',
          prop: 'order_sn',
          width: 180,
        },
        {
          label: 'iccid',
          prop: 'iccid',
          width: 160,
        },
        {
          label: '套餐类型',
          prop: 'combo.package_type_name',
          width: 100,
        },
        {
          label: '套餐名称',
          prop: 'combo.name',
          width: 120,
        },
        {
          label: '微信用户',
          prop: 'wxuser_name',
          width: 100,
        },
        {
          label: '支付金额',
          prop: 'pay_amount',
          width: 80,
        },
        {
          label: '创建时间',
          prop: 'create_dt',
          width: 140,
        },

      ],
      json_fields: {
        "订单号": { field: "order_sn", callback: value => { return '&nbsp;' + value } },  //添加空格让数字不会科学计数
        "iccid": { field: "iccid", callback: value => { return '&nbsp;' + value } },
        "套餐类型": "combo.name",
        "微信用户": "wxuser_name",
        "套餐名称": "combo.name",
        "订单金额": "pay_amount",
        "创建时间": "create_dt",
      },
      json_meta: [
        [
          {
            key: "charset",
            value: "utf-8",
          },
        ],
      ],
      downListData: [],
      refundAmount: '',
      buttonType: {
        text: '订单导出',
        type: false
      },
      downloadQuery: {},
      downloadFlag: false,
      loading: false,
      detail_box:{
        show: false,
        id: 0,
      },
    };
  },

  mounted() {
    this.getListData();
    this.$api.foundation.dicListExtendCache(
      [
        this.$api.Enum.DicTypeOrderStatus,
        this.$api.Enum.DicTypeResellerList,
        this.$api.Enum.DicTypeChannelDrive,
      ],
      {},
      res => {
        this.option = res;
      }
    );
    let userData = JSON.parse(localStorage.getItem("userData"));
    this.level = userData.level;
    this.$api.power(this.queryItem, this.tableItem, res => {
      this.queryItem = res.queryItem
      this.tableItem = res.tableItem
    })
  },

  methods: {
    getListData() {
      this.loading = true
      let body = this.$tool.copyJSON(this.queryInfo)
      body.status = [body.status]
      this.$api.order.orderList(body, res => {
        if (res.status) {
          this.listData = res.data.list;
          this.queryInfo.total = res.data.page.total;
          this.loading = false
        } else {
          this.$message.error(res.message);
        }
      });
    },
    detailOpen(listData) {
      this.detail_box.id = listData.id;
      this.detail_box.show = true
    },
    refundButton(listData) {
      this.refundForm = { pay_amount: '' }
      this.refundForm.order_sn = listData.order_sn;
      this.refundForm.order_id = listData.id;
      this.refundForm.pay_amount = listData.pay_amount
      this.refundAmount = listData.pay_amount
      this.$refs.refundDialog.dialog = true
    },
    submitRefund() {
      this.refundForm.pay_amount = Number(this.refundForm.pay_amount)
      this.$api.order.refundCreate(this.refundForm, res => {
        if (res.status) {
          this.$message.success(res.message);
          this.$refs.refundDialog.dialog = false;
          this.getListData();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    detailClose() {
      this.getListData()
      this.detail_box.show = false
    },
    optionDate(dateArr) {
      if (dateArr) {
        this.queryInfo.create_start_dt = dateArr[0];
        this.queryInfo.create_end_dt = dateArr[1];
      } else {
        this.queryInfo.create_start_dt = ''
        this.queryInfo.create_end_dt = ''
      }
    },
    async downExcelButton() {
      this.buttonType.type = true
      this.buttonType.text = '数据导出中,请稍等'
      this.downListData = []
      Object.assign(this.downloadQuery, this.queryInfo)
      this.downloadQuery.size = 500
      this.downloadQuery.page = 1
      await this.asyncGetDonwExcelData()
      this.buttonType.type = false
      this.buttonType.text = '订单导出'
      return this.downListData
    },
    asyncGetDonwExcelData() {
      return new Promise((resolve, reject) => {
        this.getDonwExcelData()
        let time = setInterval(() => {
          if (this.downloadFlag) {
            clearInterval(time)
            resolve()
          }
        }, 500)
      })
    },
    getDonwExcelData() {
      this.$api.order.orderList(this.downloadQuery, res => {
        if (res.status) {
          res.data.list.forEach(element => {
            this.downListData.push(element)
          })
          if (this.downloadQuery.total - this.downloadQuery.page * this.downloadQuery.size < 0) {
            this.downloadFlag = true
          } else {
            this.downloadQuery.page += 1
            this.getDonwExcelData()
          }
        }
      })
    }
  }
};
</script>

<style lang="less" scoped></style>